<template>
  <div style="width: 100%;height:500px;" />
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    }
  },
  data() {
    return {
      chart: null,
      seriesData: {
        totalData: 0,
        xAxisData: [],
        seriesData: []
      }
    }
  },
  mounted() {
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
        this.chart.setOption(this.updateChart())
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /* echart初始化*/
    updateChart(chartData) { // 更新data的数据，添加透明度联动
      if (!this.chart) {
        this.chart = echarts.init(this.$el, 'macarons')
      }
      if (chartData) {
        this.chartData = chartData
      }

      this.chart.setOption(this.initOption())
    },

    initOption() {
      const chartData = this.chartData
      const Option = {
        grid3D: {
          boxWidth: 150, // 调整网格宽度以适应柱子数量和间距
          boxDepth: 80 // 调整网格深度
        },
        tooltip: {
          formatter: function(params) {
            const [deptName, year, count] = params.value
            return `公司：${deptName}<br />年份：${year}<br />数量：${count}`
          }
        },
        xAxis3D: {
          type: 'category',
          name: '',
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: 10
            }
          }
        },
        yAxis3D: {
          name: '',
          type: 'category'
        },
        zAxis3D: {
          name: '个',
          nameTextStyle: {
            fontSize: 14
          },
          nameLocation: 'end',
          type: 'value'
        },

        /* visualMap: {
          max: 40,
          dimension: 'count'
        },*/

        dataset: {
          dimensions: [
            'deptName',
            { name: 'Year', type: 'ordinal' },
            'count'

          ],
          source: chartData
        },
        series: {

          label: {
            show: false
          },
          emphasis: {
            label: {
              formatter: function(params) {
                return params.value[2]
              }
            }
          },
          type: 'bar3D',
          shading: 'lambert',
          barSize: 10, // 柱子宽度和深度均为10
          barGap: '-2px', // 柱子之间的间距为2（负值表示重叠后剩余的间距）
          encode: {
            x: 'deptName',
            y: 'year',
            z: 'count'
          },
          data: chartData.map(item => {
            return {
              value: item,
              itemStyle: {
                opacity: item[3] ? 1 : 0.3
              }
            }
          })
        }

      }
      return Option
    }
  }
}
</script>

<style scoped lang="scss">
  .chart{
    height: 100%;
  }
</style>
